<template>
  <div class="reportchartsTimeAll" style="height: 660px;">
<!--    <h2>分时-合计报表</h2>-->
    <div class="con">
      <div
        class="repecharts"
        :id="timeId"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .reportchartsTimeAll {
    width: 100%;
    background: #fff;
    padding: 35px 10px 20px 35px;
    overflow: hidden;
    > h2 {
      line-height: 1;
      font-weight: 600;
      font-size: 20px;
      letter-spacing: 1px;
    }
    .echardiv{
      width: 100%;
      height: 420px;
    }
    .repecharts {
      width: 100%;
      height: 580px;
    }
    .con {
      position: relative;
      margin-top: 10px;
      .el-tabs {
        overflow: inherit;
        .el-tabs__header {
          width: 85px;
          .el-tabs__item {
            span {
              font-size: 16px;
              i {
                margin-right: 8px;
              }
            }
          }
        }
        .el-tabs__content {
          overflow: inherit;
          .tab-block{
            display: none!important;
          }
        }
      }
      .kpi{
        position: absolute;
        top: -45px;
        right:0;
        margin-right: 60px;
      }
      .kpis {
        position: absolute;
        left: 210px;
        top: -45px;
      }
    }
    .timeoption {
      position: absolute;
      right: 0;
      top: -55px;
      .on {
        .el-input--suffix {
          .el-input__inner {
            color: #e8eeff;
            background: #5580ff;
          }
        }
      }
      margin-right: 60px;
      line-height: 48px;
      label {
        font-size: 18px;
        vertical-align: top;
      }
      .el-select {
        display: inline-block;
        margin-left: 5px;
        width: 72px;
        height: 30px;
        .el-input__inner {
          box-sizing: border-box;
          height: 32px;
          text-align: center;
          padding: 0 18px 0 0;
          width: 100%;
          font-size: 14px;
        }
        .el-input {
          position: relative;
          z-index: 9;

          .el-input__suffix {
            .el-input__suffix-inner {
              line-height: 100%;
              display: inline-block;
            }
            right: 0;
            span {
              .el-select__caret {
                font-size: 12px;
                color: #8ba9ff;
              }
            }
          }
        }
      }
      .timebtn {
        float: right;
        display: block;
        height: 100%;
        padding-top: 10px;
        //margin-left: -3px;
        a,
        .el-radio {
          border: 1px solid #dbe1e5;
          border-left: none;
          margin: 0 !important;
          float: left;
          height: 30px;
          line-height: 30px;
          color: #737373;
          font-size: 14px;
          padding: 0 18px;
          cursor: pointer;
          .el-radio__input {
            display: none;
          }
          .el-radio__label {
            padding: 0;
            line-height: 30px;
          }
          &.on,
          &.is-checked {
            color: #e8eeff !important;
            .el-radio__label {
              color: #e8eeff;
            }
            background: #5580ff !important;
          }
          &:first-child {
            border-left: 1px solid #dbe1e5;
            border-radius: 5px 0 0 5px;
          }
          &:last-child {
            border-radius: 0 5px 5px 0;
          }
          &:hover {
            background: #ebebeb;
            color: #333;
            opacity: 0.9;
          }
        }
      }
    }
  }
</style>
<script>
  let echarts = require("echarts");
  let moment = require("moment");
  var Echarts = null;
  import reportGlobal from "@/components/global/reportGlobal";//公共配置
  let unit = reportGlobal.unit;
  let colorList = reportGlobal.colorList;
  export default {
    props: {
      kpislist:{
        default:function () {
          return []
        }
      },
      x_data:{
        default: function() {
          return []
        }
      },
      y_name:{
        default: function() {
          return []
        }
      },
      y_data:{
        default: function() {
          return []
        }
      },
      timeSize:{        //时间粒度选中和列表
        default:function(){
          return {
            list:[],
            check:'',
          }
        }
      },
      con_w:{
        default:function () {
          return ''
        }
      }
    },
    data() {
      return {
        timeId:
          Number(
            Math.random()
            .toString()
            .substr(3, 15) + Date.now()
          ).toString(36) + "Echarts",
        defaultEcharts:{            //默认样式与无数据图片
          title:{
            show:true,
            text:"暂 无 数 据",
            textAlign:'center',
            left:'48%',
            top:'45%',
            textStyle:{
              fontSize:16,
              color:'#b4b6bd',
            }
          },
          grid: {
            x: 70,
            x2: "8%"
          },
          backgroundColor:{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: '#f5f8fe' // 0% 处的颜色
            }
            ],
            global: false // 缺省为 false
          },

          series: []
        },
        kpiCheckType:[],
        record:'',          //记录指标点击为最后一个值
      };
    },
    components: {},
    created() {},
    mounted() {
      //默认分时
      Echarts = echarts.init(document.getElementById(this.timeId));
      this.loadEchart(this.defaultEcharts);
      setTimeout(() => {
        this.loadEchartResize("");
      }, 200);
    },
    beforeDestroy(){},
    watch: {
      kpislist(val){
        if(val.length){
          this.kpiCheckType = val
        }
      },
      con_w(val){
        this.loadEchartResize(val);
      }
    },
    methods: {
      UpData(ishavedata){
        if(ishavedata==false ||this.y_data.length==0){
          this.loadEchart(this.defaultEcharts);
          return ;
        }
        if(this.kpiCheckType.length<1) {
          this.defaultEcharts.title.text="请至少选择一个要查看的指标"
          this.loadEchart(this.defaultEcharts);
          return
        };
        let option={};
        let isNumShow=this.kpiCheckType.length==1;      //是否显示大数字
        option.legend={
          type: 'scroll',
          orient: "horizontal",
          width:'70%',
          top: "0",
          left:'center',
          itemGap: 20,
        };
        option.grid={
          left:'100',
          right:'80',
          top:'70',
          bottom:100,
        };

        option.tooltip={
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function(params) {
            //自定义函数修改折线图给数据加单位
            let str = ""; //声明一个变量用来存储数据
            str += "<div>" + params[0].name + "</div>"; //显示日期的函数
            for (let i = 0; i < params.length; i++) {
              //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
              str +=
                '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                params[i].color +
                ';"></span>' +
                params[i].seriesName +
                "</span> : <span>" +
                (params[i].seriesName.includes('率')
                  ? params[i].data + "%"
                  : params[i].data) +
                "</br>";
            }
            return str;
          }
        };
        option.color= [];
        option.toolbox={
          right: "0",
          top: "0",
          feature: {
            magicType: {
              show: true,
              type: ["line", "bar"]
            },
            restore: {
              show: true
            },
            saveAsImage: { show: true }
          }
        };
        option.nameLocation="center";
        option.xAxis=[
          {
            type: "category",
            gridIndex: 0,
            axisLabel: {
              rotate: 30
            },
            data:this.x_data
          }
        ];
        option.yAxis=[
          {
            type: "value",
            name: '',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#2c69f3'
              }
            }
          }
        ];

        if(this.isPer(this.kpiCheckType)) {
          let max=this.getMaxPer(this.kpiCheckType);
          option.yAxis.push({
            type: "value",
            name: '百分比',
            min: 0,
            max: max,
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#b72cff'
              }
            },
            splitLine: {
              show: !this.isPer(this.kpiCheckType,true)
            },
            axisLabel: {
              formatter: '{value}%'
            }
          })
        }

        option.series=[];
        option.dataZoom=[
          {
            show: true,
            start: 0,
            end: 100,
            height:30,
          },
          {
            type: 'slider',
            start: 0,
            end: 100,
          },
        ]
        for (let i = 0; i < this.kpiCheckType.length; i++) {
          let dataArr = this.y_data[this.kpiCheckType[i]];//同一种指标的数据数组
          let serObj = {
            type: "bar",
            smooth: true,
            color: colorList[this.kpiCheckType[i]],
            barMaxWidth:'20px',
            yAxisIndex: unit[this.kpiCheckType[i]] == '%' ? 1 : 0,
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ],
            },
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorList[this.kpiCheckType[i]]  // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              normal: {
                label: {
                  show: isNumShow, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: 'black',
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              }
            },
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                  fontSize: 16,
                  fontWeight: 'bold'
                },
                {
                  type: "min",
                  name: "最小值",
                  fontSize: 16,
                  fontWeight: 'bold'
                }
              ],
            },
            lineStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorList[this.kpiCheckType[i]]  // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            areaStyle: {
              // color: colorList[this.kpiCheckType[i]],
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorList[this.kpiCheckType[i]]  // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            name: '',
            data: dataArr
          };
          if (unit[[this.kpiCheckType[i]]] == '%') {
            serObj.type = 'line';
            serObj.areaStyle = {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorList[this.kpiCheckType[i]]  // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff'   // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }
          serObj.name = this.y_name[this.kpiCheckType[i]];
          option.series.push(serObj);
        }
        this.loadEchart(option);
      },
      loadEchart(option) {
        // console.log(option,'option');
        Echarts.setOption(option, true);
      },
      loadEchartResize(w) {
        let opts = { width: w };
        Echarts.resize(opts);
      },

      //指标中是否存在%单位的
      isPer(arr,isfan=false){
        for(let i in arr) {
          if(isfan) {
            if(unit[arr[i]]!='%') {
              return true;
            }
          } else{
            if(unit[arr[i]]=='%') {
              return true;
            }
          }
        }
        return false;
      },
      //得到Max百分比
      getMaxPer(arr){
        let max=50;
        for(let i in arr) {
          if(unit[arr[i]]=='%') {
            for(let j in this.y_data[arr[i]]) {
              max=max > this.y_data[arr[i]][j] || !(this.y_data[arr[i]][j]) ? max : this.y_data[arr[i]][j];
            }
          }
        }
        let a=0;
        if(max>50) {
          a = parseInt( Math.ceil(max)% 10);
        }
        return Math.ceil(max)>50?(Math.ceil(max)+(10-a)):50;
      }
    },
  };
</script>
